<template>
  <n-spin>
    <div id="body">
      <div id="qrcode"></div>
      <span id="desc">{{desc}}</span>
    </div>
  </n-spin>
</template>

<script>
import {getLoginInfo, loginCheck} from "../../api/oj/login";
import QRCode from "qrcodejs2";
import {setToken, setUserInfo} from "../../utils/auth";

export default {
  data() {
    return {
      qrCodeReturnUrl: "",
      tempUserId: "",
      timer: null,
      desc: "",
    }
  },
  created() {
    this.$Spin.show({
      render: (h) => {
        return h("div", [
          h("Icon", {
            class: "demo-spin-icon-load",
            props: {
              type: "ios-loading",
              size: 50,
            },
          }),
          h("div", { class: "textSty" }, "loading"),
        ]);
      },
    });
    getLoginInfo().then(res => {
      this.qrCodeReturnUrl = res.result.qrCodeReturnUrl;
      this.tempUserId = res.result.tempUserId;
      this.desc = "请使用微信扫码登录";
      this.qrcode();
      this.$Spin.hide();
    });
    this.timer = setInterval(() => {
      loginCheck(this.tempUserId).then(res => {
        if(res.result != null) {
          this.$Message.success("登录成功")
          setToken(res.result.token);
          setUserInfo(res.result.userInfo);
          clearInterval(this.timer);
          location.reload();
        }
      });
    }, 1000)
  },
  methods: {
    qrcode() {
      let qrcode = new QRCode("qrcode", {
        width: 200,
        height: 200,
        colorDark: "#59BE66",
        text: this.qrCodeReturnUrl,
      });
    },
  },
}
</script>
<style scoped >
body {
  background-image: url(../../../static/img/login_bg.svg);
  background-size: 100%;
}
#body {
  position: absolute;
  left: 50%;
  top: 50%;
  text-align: center;
  transform: translate(-50%, 50%);
}
#qrcode {
  margin: 10px;
}
#desc {
  font-size: 18px;
}
.ivu-form-item .ivu-form-item-label {
  font-size: 14px !important;
}
.box {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.login img {
  padding-right: 20px !important;
}
</style>
<style lang="stylus" scope type="text/stylus" rel="stylesheet/stylus">
@import '../../assets/stylus/theme.styl';
@import '../../assets/stylus/article.styl';

.home-content {
  width: auto;
  min-height: calc(100vh - 108px);

  @media only screen and (max-width: 768px) {
    margin: 5px 5px 0 5px;

    .dev-sign-main {
      width: 100%;
      margin: 60px auto;
      padding: 0 16px;
    }
  }

  @media screen and (min-width: 768px) {
    margin: 10px 10px 0 10px;
  }

  @media screen and (min-width: 992px) {
    margin: 15px 35px 0 35px;
  }

  .layout-left, .layout-right {
    padding: 0;

    @media only screen and (max-width: 768px) {
      padding: 0;
    }

    @media screen and (min-width: 768px) {
      padding: 0;
    }

    @media screen and (min-width: 992px) {
      padding: 0 10px;
    }

    @media screen and (min-width: 1200px) {
      padding: 0 10px;
    }
  }
}

.dev-sign-main {
  width: 400px;
  margin: 120px auto;
  padding: 0 16px;
}

.ivu-card-shadow {
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
}

.ivu-card {
  background: #FAFAFA;
  border-radius: 4px;
  font-size: 14px;
  position: relative;
  transition: all 0.2s ease-in-out;
}

article, aside, blockquote, body, button, dd, details, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, iv-input, legend, li, menu, nav, ol, p, section, td, textarea, th, ul {
  margin: 0;
  padding: 0;
}

*, :after, :before {
  box-sizing: border-box;
}

* {
  -webkit-tap-highlight-color: transparent;
}

user agent stylesheet, div {
  display: block;
}

* {
  -webkit-tap-highlight-color: transparent;
}

* {
  -webkit-tap-highlight-color: transparent;
}

* {
  -webkit-tap-highlight-color: transparent;
}

* {
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, 5FAE 8 F6F 9 6C 5 9 ED1, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #515a6e;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  -webkit-tap-highlight-color: transparent;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

* {
  -webkit-tap-highlight-color: transparent;
}

*, :after, :before {
  box-sizing: border-box;
}

*, :after, :before {
  box-sizing: border-box;
}

.lizi {
  position: absolute;
  top: 0;
  left: 0;
  height: calc(100VH - 66px);
  width: 100VW;
  z-index: -1;
}

html, body {
  width: 100%;
}
</style>
